<template>
    <div class="message">
       <div class="message_header">
           <div class="message_header_con">
                <span class="goBack" @click="goBack">&lt;</span>
                <p class="message_title">{{title}}</p>
           </div>
       </div>
       <div class="message_con">
            <ul class="message_type">
                <li>
                <router-link to="/systemMessage"><span>系统消息</span><span>&gt;</span></router-link>
                </li> 
                <li>
                <router-link to="/privateLetter"><span>私信</span><span>&gt;</span></router-link>
                </li> 
                <li>
                <router-link to="/forumReply"><span>论坛回复</span><span>&gt;</span></router-link>
                </li> 
        </ul>
       </div>
       
    </div>
</template>
<script>
export default {
    name:'message',
    data(){
        return{
            title:'消息'
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../assets/less/public.less);
.message{
    background:@config-bg3 ;
    height: 100vh;
    .message_header{
        @font16();
        @height();
        background: @config-bg2;
        .message_header_con{
            @width();
             @flex();
             @justify1();
            .goBack{
                @goBack();
            }
            .message_title{
                flex-grow: 1;
                @font16();
            }
        }
        
    }
    .message_con{
        background: @config-bg2;
        .message_type{
            @width();
            margin-top: 0.5em;
            li{
                border-bottom: 1px solid #cccccc;
                height: 3em;
                line-height: 3em;
                a{
                    @flex();
                    @justify4();
                    span:last-child{
                        @goBack();
                        color: #cccccc;
                        font-weight: normal;
                    }
                }
            }
            li:last-child{
                 border:none;
            }
        }
    }
    
}
</style>


